<template>
  <div>
    <div v-if="!success">
      <h3>创建一个考试</h3>
      <div>
        <el-form
            ref="formRef"
            :model="formInfo"
            :rules="rules"
            label-position="top"
            size="large"
            status-icon
        >
          <el-form-item label="考试标题" prop="examName">
            <el-input v-model="formInfo.examName" />
          </el-form-item>
          <el-row :gutter="20">
            <el-col :span="20">
              <el-form-item label="考试开始时间" prop="examTime">
                <el-date-picker
                    v-model="formInfo.examTime"
                    type="datetimerange"
                    range-separator="至"
                    start-placeholder="选择考试开始时间"
                    end-placeholder="选择考试结束时间"
                    @blur="jisuan"
                />
              </el-form-item>
            </el-col>
            <el-col :span="4">
              <el-form-item required label="考试总时长">
                <el-input disabled v-model="shi" />
              </el-form-item>
            </el-col>
          </el-row>
          <el-form-item required label="考试描述"></el-form-item>
          <div style="width: 100%;">
            <Editor  :locale="zhHans" :value="formInfo.examDesc" @change="handleChange" />
          </div>
        </el-form>
      </div>
      <div style="text-align: right;margin-top: 20px;">
        <el-button type="primary" @click="createExam">创建考试</el-button>
      </div>
    </div>
    <div v-else style="margin-top: 50px">
      <el-result
          icon="success"
          title="创建成功"
          sub-title="您的考试已经创建成功，选择您接下来的操作"
      >
        <template #extra>
          <el-button @click="success = false">继续创建</el-button>
          <el-button type="primary">查看考试列表</el-button>
        </template>
      </el-result>
    </div>
  </div>
</template>

<script>
import zhHans from 'bytemd/locales/zh_Hans.json';
import 'bytemd/dist/index.css'
import { Editor } from '@bytemd/vue-next'
export default {
  name: "Exma",
  components:{
    Editor
  },
  data() {
    return {
      zhHans,
      formInfo: {
        examDesc: "",
        examTime: null,
        examName: null,
      },
      success: false,
      shi: "0分钟",
      rules: {
        examName: [
          { required: true, message: "请输入考试标题", trigger: "blur" }
        ],
        examTime: [
          { required: true, message: "请选择考试时间", trigger: "blur" }
        ]
        }
      }
    },
  methods: {
    handleChange(val){
      this.formInfo.examDesc = val
    },
    jisuan(){
      // 计算考试时长
      if (this.formInfo.examTime[0] && this.formInfo.examTime[1]) {
        let shi = this.formInfo.examTime[1].getTime() - this.formInfo.examTime[0].getTime()
        this.shi = shi / 1000 / 60 + "分钟"
      }
    },
    createExam(){
      this.$refs["formRef"].validate((valid) => {
        if (valid) {
          this.$request.post("/exam/create", {
            examName: this.formInfo.examName,
            examStartTime: this.formInfo.examTime[0],
            examEndTime: this.formInfo.examTime[1],
            examDesc: this.formInfo.examDesc,
          }).then((res) => {
            if (res.code === 0) {
              this.$message({
                message: "创建成功",
                type: "success"
              });
              this.formInfo= {
                examDesc: "",
                examTime: null,
                examName: null,
              }
              this.shi = "0分钟"
              this.success = true
            }
          })
        } else {
          return false;
        }
      })
    }
  }
}
</script>

<style scoped>

</style>
